<template>
    <div class="follow-item">
      <router-link class="bg-white" :to="{path:'normal-clients-detail', query:{custom_id:follow.custom_id, custom_type:custom_type}}">
        <div class="follow-desc" >
          <span class="img-wrapper" v-if="custom_type == 0"><img data-object-fit="cover" :src="follow.head_img_url" /></span>
          <span class="social-name default-user" :class="{'no-margin':custom_type == 1}"  v-if="custom_type == 1 && follow.parent_name">{{ follow.parent_name }}</span>
          <span class="social-name" :class="{'no-margin':custom_type == 1}" v-if="follow.nick_name">{{ follow.nick_name }}</span>
          <span  class="folow-state">{{ follow.clue_type | clueType }}</span>
        </div>
        <div class="property-items" v-if="follow.clue_desc">{{ follow.clue_desc }}</div>
        <div class="uploaded-imgs" v-if="follow.imgs && follow.imgs.length">
          <router-link class="img-square" v-for="(img, index) in follow.imgs" :key="index" :to="{'path':'img-view', query:{url:img.url}}">
            <img data-object-fit="cover" :src="img.url" />
          </router-link>
        </div>
        <div class="little-font" v-if="follow.clue_location">跟进位置：{{ follow.clue_location }}</div>
        <div class="little-font" v-if="follow.insert_time">跟进时间：{{ follow.insert_time }}</div>
      </router-link>
    </div>
</template>

<script>

var objectFitImages = require('object-fit-images');



  export default{
    props:{
      follow: {
      type : Object,
      require: true
      },

      custom_type:{
        require:true
      }
    },
    data () {
      return {

      };
    },
    methods:{

    },

    components:{

    }
  }
</script>

<style lang="less">
  @import '../less/index.less';

  .follow-item {
    background-color: white;
    padding:4px 15px;
    padding-left: 10px;

    .bg-white{
      padding:6px 8px;
      border: 1px solid #dfdfdf;
      border-radius: 4px;
      display: block;
    }

    .follow-desc {
       display: block;

       &>*{
       vertical-align: middle;
       }
    }

    .img-wrapper {

      width: 3em;
      height: 3em;
      display: inline-block;

      img {
        border-radius: 3em;
        border: 1px solid #eee;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

    }

    a,a:hover,a:visited,a:focus{
      color:#323333;
    }

    .social-name{
      display: inline-block;
      margin-left: 10px;
    }

    .property-items{
      margin:5px 0 0;

      a{
        display: inline-block;
        padding-right: 12px;
        line-height: 15px;
        height: 15px;
      }

      a:not(:first-child) {
        padding-left: 12px;
      }

      a:not(:last-child) {
        border-right: 1px solid #B2B2B2;
      }
    }

    .label-list{

      &:extend(.clearfix all);

      label{
        float: left;
      }

      a {
        padding: 2px 8px;
        display: block;
        color: white;
        font-size: 12px;
        border-radius: 6px;
        margin-right: 10px;
        background-color: #35ADFF;
      }
    }

    .folow-state{
      padding: 2px 8px;
      display: inline-block;
      color: white;
      font-size: 12px;
      border-radius: 6px;
      margin-right: 10px;
      margin-left: 10px;
      float: right;
      margin-top: 10px;
      background-color: #35ADFF;
    }

    .pull-right{
      float: right;
      margin-top: 0.5rem;
    }

    .little-font{
      font-size: 12px;
    }

    .uploaded-imgs {
      padding: 8px 0 4px;
      &:extend(.clearfix all);
    }

    .img-square{
      width: 4rem;
      height: 4rem;
      overflow: hidden;
      padding:2px;
      float: left;
      background-color: @img-bg;
      border: 1px solid @img-bg;
      margin: 0 8px 0 0;
      border-radius: 2px;

      img{
        width: 100%;
        height: 100%;
        object-fit: contain;

      }
    }

    @media (min-width: 640px) {
      .img-square{
        width: 80px;
        height: 80px;
      }
    }
  }
</style>
